<template>

  <div>
      <div @click="todayCount" style="padding:0.1rem;font-size:0.46rem;" v-if="useInfo.userTypeId==4&&dynamicTypeId=='2'">今日统计   >></div>
    <mt-loadmore :autoFill='false' :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="allLoaded">
      <ul>
        <li v-for='(item,index) in showData' class="wrap">
            <div class="dongtai_title">{{item.title}}</div>
          <div class="img_wrap" >
             <img class="minImage" v-for='(img,index) in item.filePathList' v-if="img.fileType==1" @click.stop="$api.showImgDetail(img.filePath)" :src="$api.formatterImg(img.filePath)" />
          </div>
          <div class="audio_wrap">
            <audio v-for='(audio,index) in item.filePathList' v-if="audio.fileType==2" :src=audio.filePath></audio>
          </div>
          <p class="text content_wrap" @click="" :class="{open:item.openActive}" v-html="item.content"></p>
          <div style="width:100%;margin-bottom:0.18rem" v-if="item.content.length>=90" >
              <a v-if="!item.openActive" @click="$set(item,'openActive',true)" class="delete">展开</a>
              <a v-if="item.openActive" @click="$set(item,'openActive',false)" class="delete">收起</a>
            </div>
          <div class="time">{{new Date(item.createTime).Format('yyyy-MM-dd hh:mm')}}</div>
          <a class="delete" v-if="canDelete(item.userId)" @click="deleteThings(1,item.dynamicInfoId)">删除</a>
          <div class="dongtai_action">
            <!-- :class="{ active: item.zan,}" -->
            <div class="zan" :class="{ active: ifZan(item.tsDynamicUserList)}" @click="clickZan(index)">
              <i></i>
              <div>赞</div>
            </div>
            <div class="pinglun">
              <i></i>
              <div @click="comment(item.dynamicInfoId)">评论</div>
            </div>
            <div class="share">
              <i></i>
              <div @click="$api.share(item)">分享</div>
            </div>
          </div>
          <div class="dongtai_zan" :class="{active:item.tsDynamicUserList.length}">
            <i></i>
            <span class="name" v-for='(people,index) in item.tsDynamicUserList' v-if='index < 3'>{{people.userName}} </span>
            <span class="to_more" v-if="item.tsDynamicUserList.length>=3">等{{item.tsDynamicUserList.length}}个人觉得很赞!</span>
          </div>
          <div class="pinglun_list_wrap" :class="{active:item.tsDynamicCommentInfoList.length}">
            <ul class="pinglun_list">
              <li v-for='(row,i) in item.tsDynamicCommentInfoList'>
                <div class="pinglun_wrap" @click="huifu(row.dynamicCommentInfoId,row.pid,row.pidPath,i,row.userName)">
                  <div>
                    <span class="name">{{row.userName}}</span>
                    <span>:</span>
                    <span class="neirong" v-html="row.bodyComment"></span>
                  </div>
                  <a class="delete" v-if="canDelete(row.userId)" @click.stop="deleteThings(2,row.dynamicCommentInfoId)">删除</a>
                </div>
                <div v-for="(row1,i) in row.voTsDynamicCommentReplyInfoList" @click="huifu(row1.dynamicCommentInfoId,row1.pid,row1.pidPath,i,row1.userName)"
                  class="huifu_wrap">
                  <div>
                    <span class="name">{{row1.userName}}</span>
                    <span class="huifu" v-if="row1.userNameRep">回复</span>
                    <span class="name">{{row1.userNameRep}}</span>
                    <span>:</span>
                    <span class="neirong" v-html="row1.bodyComment"></span>
                  </div>
                  <a class="delete" v-if="canDelete(row1.userId)" @click.stop="deleteThings(3,row1.dynamicCommentReplyInfoId)">删除</a>
                </div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </mt-loadmore>
    <mt-popup v-model="showcomment" style="width:100%;" position="bottom">
      <div class="comment_wrap">
        <input v-model="messagerValue" maxlength="200" :placeholder="inputPlaceholder" v-focus="showcomment" />
        <mt-button size="small" type="primary" :disabled='!messagerValue.trim()' @click="messagerConfirm()">确定</mt-button>
      </div>
    </mt-popup>

  </div>

</template>
<script>
    import {
        MessageBox
    } from 'mint-ui'
    export default {
        name: "footShow",
        data() {
            return {
                content: '',
                allLoaded: false,
                useInfo: {},
                showData: [],
                pageNum: 1,
                pageSize: 10,
                inputPlaceholder: '',
                showcomment: false,
                messagerValue: '',
            };
        },
        watch: {
            show(newValue, oldValue) {
                if (newValue) {
                    this.getList();
                }
            }
        },
        props: ['dynamicTypeId', 'show'],
        methods: {
            todayCount() { //今日统计
                this.$router.push({
                    path: 'todayCount'
                })
            },
            messagerConfirm() {
                this.showcomment = false;
                this.messagerCallback(this.$api.utf16toEntities(this.messagerValue));
                this.messagerValue = '';
            },
            showPinglun(callback) {
                this.showcomment = true;
                this.messagerCallback = callback
            },
            clickZan: function(index) {
                var j = this.ifZan(this.showData[index].tsDynamicUserList); //遍历赞列表看看这个人赞过没有
                var array = this.showData[index].tsDynamicUserList
                var url = '';
                if (j) { //列表有这个人,说明是取消赞
                    array.splice(j - 1, 1);
                    url = "dynamicUser/remove"
                } else { //没有,说明是点赞
                    array.push({
                        userId: this.useInfo.userId,
                        userName: this.useInfo.userName,
                    })
                    url = "dynamicUser/add"
                }
                var params = {
                    dynamicInfoId: this.showData[index].dynamicInfoId,
                    userId: this.useInfo.userId,
                };
                this.$api.post(url, params, (data) => {
                    console.log('点赞成功');
                })
            },
            comment: function(id) { //评论
                var params = {
                    userId: this.useInfo.userId,
                    dynamicInfoId: id,
                    // pid: pid,
                    // pidPath: pidPath + ',' + this.useInfo.userId,
                };
                this.inputPlaceholder = ''
                this.showPinglun((value) => {
                    params.bodyComment = value; //参数评论内容
                    var url = 'dynamicComment/add'
                    this.$api.post(url, params, (data) => {
                        this.getList();
                    })
                })
            },
            huifu(id, pid, pidPath, index, userName) { //回复
                if (!pid) {
                    pid = '';
                    pidPath = '';
                }
                if (userName) {
                    this.inputPlaceholder = '回复' + userName + ':'
                } else {
                    this.inputPlaceholder = ''
                }
                var params = {
                    dynamicCommentInfoId: id,
                    userId: this.useInfo.userId,
                    pid: pid,
                    pidPath: pidPath + ',' + this.useInfo.userId,
                };
                this.showPinglun((value) => {
                    params.bodyComment = value; //参数评论内容
                    var url = 'dynamicCommentReply/add'
                    this.$api.post(url, params, (data) => {
                        this.getList();
                    })
                })
            },
            ifZan(list) {
                var state = false
                list.forEach((element, index) => {
                    if (element.userId == this.useInfo.userId) {
                        state = index + 1;
                    }
                });
                return state;
            },
            canDelete(useID) {
                if (useID == this.useInfo.userId || this.useInfo.userTypeId == 1) {
                    return true;
                } else {
                    return false;
                }
            },
            deleteThings(type, id) { //删除动态,评论,回复
                MessageBox.confirm('确定要删除?').then(o => {
                    switch (type) {

                        case 1: //删除动态
                            var params = {
                                dynamicInfoId: id,
                            };
                            var url = 'dynamicInfo/remove'
                            this.$api.post(url, params, (data) => {
                                this.getList();
                            })
                            break;
                        case 2: //删除评论
                            var params = {
                                dynamicCommentId: id,
                            };
                            var url = 'dynamicComment/remove'
                            this.$api.post(url, params, (data) => {
                                this.getList();
                            })
                            break;
                        case 3: //删除回复
                            var params = {
                                dynamicCommentReplyId: id,
                            };
                            var url = 'dynamicCommentReply/remove'
                            this.$api.post(url, params, (data) => {
                                this.getList();
                            })
                            break;
                    }
                }).catch(e => {

                })

            },
            loadBottom() {
                this.pageNum++;
                this.getList('push');
            },
            getList(push) { //刷新页面数据
                var url = 'dynamicInfo/selectPage'
                if (!push) {
                    this.pageNum = 1;
                }
                var params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    dynamicTypeId: this.dynamicTypeId,
                    schoolId: this.useInfo.schoolId,
                }
                this.$api.post(url, params, (data) => {

                    if (push) {
                        data.info.list.forEach(element => {
                            this.showData.push(element);
                        })
                    } else {
                        this.showData = data.info.list;
                    }
                    if (data.info.total == this.showData.length) {
                        this.allLoaded = true;
                    }
                    this.$refs.allLoaded.onBottomLoaded();
                })
            }
        },
        created() {
            this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            if (this.dynamicTypeId == 1) {
                this.getList();
            }
        },
    }
</script>
<style scoped>
    .wrap {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        text-align: left;
        padding: 0.2rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        font-size: 0.3rem;
        background: white;
        margin-bottom: 0.2rem;
    }
</style>